<template>
  <div :id="toolbarId" class="row items-center q-gutter-x-md q-gutter-y-sm q-mt-sm q-mb-sm">
    <q-input
      v-model="params.alarmLevel"
      label="报警级别"
      filled
      type="text"
      color="grey-5"
      dark
      dense
      :style="{ width: '90px', height: '40px' }"
    />
    <q-input
      v-model="params.alarmCode"
      label="报警代码"
      filled
      type="text"
      color="grey-5"
      dark
      dense
      :style="{ width: '90px', height: '40px' }"
    />

    <q-select
      filled
      v-model="params.isNeedConfirm"
      :options="confirmOptions"
      label="是否需要确认"
      color="grey-5"
      dark
      dense
      emit-value
      map-options
      :style="{ width: '160px', height: '40px' }"
    />

    <date-input label="开始时间" field="startTime" @updateTime="updateTime" />

    <date-input label="结束时间" field="endTime" @updateTime="updateTime" />

    <q-btn
      style="color: #fff; background-color: #dbb22e; height: 30px; width: 70px"
      label="查询"
      @click="handleQuery"
    />

    <filter-input />
  </div>
  <main-table :table-id="tableId" :rows="rows" :height="height" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useQuasar } from 'quasar';
import dayjs from 'dayjs';

import FilterInput from 'src/components/filter/input.vue';
import { useTableHeight } from 'src/boot/grid';
import { get } from 'src/boot/api';
import DateInput from '../components/date.vue';
import MainTable from './table.vue';
import { tableId, toolbarId } from '../setup';

export default defineComponent({
  name: 'main-toolbar',
  components: {
    DateInput,
    FilterInput,
    MainTable,
  },
  setup() {
    const $q = useQuasar();

    const params = ref({
      alarmLevel: '',
      alarmCode: '',
      isNeedConfirm: '',
      startTime: '',
      endTime: '',
    });

    const rows = ref([{ content: '1111' }]);

    const confirmOptions = [
      {
        label: '已确认',
        value: true,
      },
      {
        label: '未确认',
        value: false,
      },
    ];

    const height = useTableHeight(toolbarId);

    const updateTime = (payload: any) => {
      console.log(payload);
      if (payload.field === 'startTime') {
        params.value.startTime = payload.clause;
      } else {
        params.value.endTime = payload.clause;
      }
    };

    const handleQuery = async () => {
      const date1 = dayjs(params.value.startTime);
      const date2 = dayjs(params.value.endTime);
      if (date1.isAfter(date2)) {
        return $q.notify('开始时间在结束时间之后');
      }
      if (date2.isBefore(date1)) {
        return $q.notify('结束时间在开始时间之前');
      }
      const { data, code, message } = await get('/alarmService/queryAlarmHistoryList', params.value);
      if (code === 200) {
        rows.value = data;
        $q.notify('查询成功');
      } else {
        $q.notify({ message, type: 'negative' });
      }
    };

    return {
      tableId,
      toolbarId,
      params,
      rows,
      height,
      confirmOptions,
      handleQuery,
      updateTime,
    };
  },
});
</script>
